<template>
  <div class="student-main">
    <h1>学员管理</h1>

    <!-- 头部部分 -->

    <el-card class="box-card card" shadow="hover">
      <span>搜索栏</span>
      <el-row :gutter="20" style="margin-top: 20px">
        <el-col :span="6"
          ><el-input
            v-model="search.name"
            placeholder="根据名字查询"
            size="small"
          />
        </el-col>
        <el-col :span="6">
          <el-select
            class="search-input-item"
            size="small"
            v-model="search.classId"
            placeholder="根据班级查询"
            clearable
          >
            <el-option
              v-for="item in classList"
              :key="item.id"
              :label="item.className"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="6"
          ><el-select
            class="search-input-item"
            size="small"
            v-model="search.dormId"
            placeholder="根据宿舍查询"
            clearable
          >
            <el-option
              v-for="item in dormList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="6"
          ><el-date-picker
            class="search-input-item"
            v-model="search.startTime"
            value-format="yyyy-MM-dd"
            type="date"
            size="small"
            placeholder="选择开始时间"
          >
          </el-date-picker>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top: 20px">
        <el-col :span="6" :offset="18">
          <el-button size="small" @click="reset">重置</el-button>
          <el-button size="small" type="primary" @click="doSearch"
            >查询</el-button
          >
        </el-col>
      </el-row>
    </el-card>

    <!-- 主体部分 -->
    <div class="container card">
      <el-card shadow="always" :body-style="{ padding: '20px' }">
        <div slot="header">
          <span
            ><el-button type="primary" size="small" @click="goAdd"
              >新增学员</el-button
            >
          </span>
        </div>
        <el-table
          v-loading="loading"
          :data="studentList"
          border
          style="width: 100%"
        >
          <el-table-column fixed type="index" label="序号" width="50" />
          <el-table-column prop="name" label="姓名" width="120" />
          <el-table-column label="性别" width="80">
            <template slot-scope="scope">
              <span> {{ scope.row.sex == 0 ? "男" : "女" }} </span>
            </template>
          </el-table-column>
          <el-table-column prop="age" label="年龄" width="80" />
          <el-table-column prop="cityText" label="地址" width="320" />
          <el-table-column prop="tel" label="电话" width="180" />
          <el-table-column prop="classname" label="班级" width="120" />
          <el-table-column prop="dormname" label="宿舍" width="120" />
          <el-table-column prop="addTime" label="日期" width="120" />
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="goEdit(scope.row.id)"
                >编辑</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="goDelete(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="margin-top: 30px; text-align: right"
          :current-page="page.start"
          :page-sizes="page.sizes"
          :page-size="page.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.totalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-card>
    </div>
    <!-- 弹窗 -->
    <Detail
      ref="detail"
      :class-list="classList"
      :dorm-list="dormList"
      @refrush="getStudentList"
    ></Detail>
  </div>
</template>

<script>
import {
  studentList as studentListApi,
  studentDel as studentDelApi,
} from "@/api/xy/student";
import { classList as classListApi } from "@/api/xy/class";
import { dormList as dormListApi } from "@/api/xy/dorm";
import Detail from "./components/Detail";
export default {
  name: "XyStudent",
  components: {
    Detail,
  },
  data() {
    return {
      search: {
        name: "",
        classId: "",
        dormId: "",
        status: "",
        startTime: "",
      },
      studentList: [],
      classList: [],
      dormList: [],
      page: {
        start: 1,
        limit: 10,
        sizes: [10, 20, 30, 40],
        totalCount: 0,
      },
    };
  },
  created() {
    //   获取班级列表
    this.getClassList();
    //   获取学员列表
    this.getStudentList();
    //  获取宿舍列表
    this.getDormList();
  },
  methods: {
    handleClick(row) {
      console.log(row);
    },
    goAdd() {
      //控制组件弹出
      this.$refs.detail.openDialog();
    },
    goEdit(id) {
      //控制组件弹出
      this.$refs.detail.openDialog(id);
    },
    goDelete(id) {
      // console.log(id);
      this.$confirm("此操作将删除该学员信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          studentDelApi({
            id: id,
          }).then((res) => {
            console.log(res);
            this.getStudentList();
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page.limit = val;
      this.getStudentList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page.start = val;
      this.getStudentList();
    },
    getStudentList() {
      // 开启loading
      this.loading = true;
      // 查询条件拼接了 分页和头部的条件
      var data = {
        start: this.page.start,
        limit: this.page.limit,
        ...this.search,
      };
      studentListApi(data).then((res) => {
        this.studentList = res.data.list;
        // 重置页码
        this.page.totalCount = res.data.totalRow;

        //关闭loading
        this.loading = false;
      });
    },
    getClassList() {
      classListApi({
        start: 1,
        limit: 10,
      }).then((res) => {
        this.classList = res.data.list;
        // console.log(res);
      });
    },
    getDormList() {
      dormListApi({
        start: 1,
        limit: 10,
      }).then((res) => {
        this.dormList = res.data.list;
        console.log(res);
      });
    },
    reset() {
      this.search = {
        name: "",
        classId: "",
        dormId: "",
        status: "",
        startTime: "",
      };
      this.getStudentList();
    },
    doSearch() {
      // 重置分页条件
      this.page.start = 1;
      this.getStudentList();
    },
  },
};
</script>

<style lang="scss" scoped>
.student-main {
  .card {
    margin: 30px;
  }
}
</style>
